<template>
  <div class="bju">
    <div style="margin-top: 1.5%;">
      <el-button type="primary" plain @click="getReportBySeason(1)">第一季度</el-button>
      <el-button type="success" plain @click="getReportBySeason(2)">第二季度</el-button>
      <el-button type="danger" plain @click="getReportBySeason(3)">第三季度</el-button>
      <el-tooltip effect="dark" plain content="10月份前查看去年数据，10月份后查看本年数据" placement="bottom">
        <el-button type="warning" plain @click="getReportBySeason(4)">第四季度</el-button>
      </el-tooltip>

      <el-tooltip effect="dark" content="查看近6个月的上报数据（不含本月）" placement="bottom">
        <el-button plain @click="getReportList">近6个月</el-button>
      </el-tooltip>
    </div>

    <div class="echart tu" ref="mychart" id="mychart"/>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {listReportPersonByMonth, listReportPersonBySeason} from "@/api/module/ljw/report";

export default {
  data() {
    return {
      // 图表参数
      option: {
        title: {
          text: ""
        },
        tooltip: {
          textStyle: {
            color: 'black'
          },
        },
        legend: {
          data: []
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: 'black'
            },
          },
          data: []
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: 'black'
            },
          }
        },
        series: [
          {
            name: "",
            type: "bar", //类型为柱状图
            data: []
          }
        ]
      },
      // 图表
      myChart: null,
      // 返回的列表
      reporterList: [],
    }
  },
  mounted() {
    this.getReportList()
    this.myChart = echarts.init(this.$refs.mychart);// 图表初始化
  },
  methods: {
    // 查询上报信息表 近6个月
    getReportList() {
      listReportPersonByMonth().then(res => {
        this.reporterList = res
        this.setChartData()
      })
    },
    // 查询上报信息表 按季节
    getReportBySeason(season) {
      listReportPersonBySeason(season).then(res => {
        this.reporterList = res
        this.setChartData()
      })
    },
    // 设置图标参数
    setChartData() {
      // 清空图表数据
      this.option.xAxis.data = []
      this.option.series[0].data = []

      for (let i = 0; i < this.reporterList.length; i++) {
        this.option.xAxis.data.push(this.reporterList[i].reportFiller)
        this.option.series[0].data.push({
          value: this.reporterList[i].count,
          itemStyle: {
            color: '#1E90FF'
          }
        })
      }
      this.initEcharts()
    },
    // 初始化图表
    initEcharts() {
      this.myChart.setOption(this.option) // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize()
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.bju {
  width: 96%;
  margin-top: 1.5%;
  margin-left: 2%;
  margin-right: 2%;
}

.tu {
  text-align: center;
  width: 100%;
  height: 750px;
}
</style>
